import { FC } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
  .square {
    width: 31px;
    height: 31px;
    font-weight: bold;
  }

  .num {
    display: inline-block;
    text-align: center;
    line-height: 31px;
    font-weight: normal;
  }
`
type CounterProps = {
  count: number
  onChange: (value: number) => void
}

const Counter: FC<CounterProps> = (props) => {
  const updateCount = (step: 1 | -1): void => {
    if (props.count + step < 1) return
    props.onChange(props.count + step)
  }

  return (
    <Wrapper>
      <button className="btn btn-light btn-sm square" onClick={() => updateCount(-1)}>
        -
      </button>
      <span className="square num">{props.count}</span>
      <button className="btn btn-light  btn-sm square" onClick={() => updateCount(1)}>
        +
      </button>
    </Wrapper>
  )
}

export default Counter
